{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}

<div class="p-3">
	<form class="layui-form gg-form-bar border-t border-x">
		<div class="layui-input-inline" style="width:300px;">
			<input type="text" name="keywords" placeholder="请输入关键字" class="layui-input" autocomplete="off" />
		</div>
		<div class="layui-input-inline">
		<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchform">提交搜索</button>
		</div>
	</form>
	<table class="layui-hide" id="lottery_staff" lay-filter="lottery_staff"></table>
</div>

<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<span class="layui-btn layui-btn-sm" lay-event="add" data-title="添加员工">+ 添加员工</span>
		<span class="layui-btn layui-btn-sm" lay-event="import" data-title="导入员工信息">+ 导入员工信息</span>
	</div>
</script>

<script type="text/html" id="barDemo">
<div class="layui-btn-group"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="read">查看</a><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a><a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="sign">签到</a><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="unsign">取消签到</a></div>
</script>

{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
	const moduleInit = ['tool'];
	function gouguInit() {
		var table = layui.table, tool = layui.tool, form = layui.form, upload = layui.upload;
		let uploadFiles;
		function clearFile() {
			for (let x in uploadFiles) {
				delete uploadFiles[x];
			}
			$('#gougu-upload-choosed').html('');
		}
		function uploadImport(){
			layer.open({
				'title':'导入员工信息',
				'type':1,
				'area': ['640px', '460px'],
				'content':'<div class="layui-form p-3">\
						<div id="uploadType1">\
							<div class="layui-form-item">\
								<label class="layui-form-label">文件：</label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-files">.xls,.xlsx</span><button type="button" class="layui-btn layui-btn-normal" id="uploadSelect">选择文件</button><a href="/static/file/员工信息导入模板.xlsx" class="layui-btn ml-4">Execl表格模板下载</a>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-tips">1、只有超级管理员才能进行批量导入操作；<br>2、只能上传 .xls、.xlsx文件；<br>3、数据请勿放在合并的单元格中；<br>4、文件大小请勿超过8MB，导入数据不能超过3000条<br>5、如果导入失败，请注意检查表格数据，格式按照样本填写，按照考生模板进行填写，否则可能会导入失败。</span>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block green" id="gougu-upload-choosed"></div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block red" id="gougu-upload-note"></div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<button type="button" class="layui-btn" id="uploadAjax">上传并导入</button>\
								</div>\
							</div>\
						</div> \
				</div>',
				success: function(layero, idx){
					form.render();
					//选择文件
					let uploadImport = upload.render({
						elem: '#uploadSelect'
						,url: '/api/import/import_staff'
						,auto: false
						,accept: 'file' //普通文件
						,acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 此处设置上传的文件格式
						,exts: 'xls|xlsx' //只允许上传文件格式
						,bindAction: '#uploadAjax'
						,choose: function(obj){
							uploadFiles = obj.pushFile();
							// 清空,防止多次上传
							clearFile();
							obj.preview(function(index, file, result){
								obj.pushFile();// 再添加
								$('#gougu-upload-choosed').html('已选择：'+file.name);
							});
						}

						,progress: function(n, elem, e){
							$('#gougu-upload-note').html('文件上转中...');
							if(n==100){
								$('#gougu-upload-note').html('数据导入中...');
							}
						}
						,error: function(index, upload){
							clearFile();
							$('#gougu-upload-note').html('数据导入失败，请关闭重试');
						}
						,done: function(res, index, upload){
							clearFile();
							layer.msg(res.msg);
							$('#gougu-upload-note').html(res.msg);
							if(res.code==0){
								layer.close(idx);
								layui.pageTable.reload();
							}						
						}
					});
				}
			});	
		}
		layui.pageTable = table.render({
			elem: '#lottery_staff',
			title: '员工列表',
			toolbar: '#toolbarDemo',
			url: '/admin/lottery_staff/datalist',
			page: true,
			limit: 20,
			limits: [20,40,80,160,320,640],
			cellMinWidth: 30,
			cols: [
				[
				{
					fixed: 'left',
					field: 'id',
					title: '编号',
					align: 'center',
					sort: true,
					width: 80
				},{
					field: 'real_name',
					title: '姓名',
					align: 'center',
					sort: true,
					width: 100
				},{
					field: 'phone_number',
					title: '手机号码',
					align: 'center',
					width: 100
				},{
					field: 'status',
					title: '类别',
					align: 'center',
					width: 100
				},{
					field: 'department',
					title: '部门',
					align: 'center',
					width: 100
				},{
					field: 'signed',
					title: '是否签到',
					align: 'center',
					width: 100
				},{
					field: 'level',
					title: '抽奖结果',
					sort: true,
					align: 'center',
					width: 100
				},
				{
					fixed: 'right',
					field: 'right',
					title: '操作',
					toolbar: '#barDemo',
					width: 240,
					align: 'center'
				}				
				]
			]
		});
		
		//监听表头工具栏事件
		table.on('toolbar(lottery_staff)', function(obj){
			if (obj.event === 'add') {
				tool.side("/admin/lottery_staff/add");
				return false;
			}
			if (obj.event === 'import') {
				uploadImport();	
				return false;
			}
		});

		//监听表格行工具事件
		table.on('tool(lottery_staff)', function(obj) {
			var data = obj.data;
			if (obj.event === 'read') {
				tool.side('/admin/lottery_staff/read?id='+obj.data.id);
			}
			else if (obj.event === 'edit') {
				tool.side('/admin/lottery_staff/edit?id='+obj.data.id);
			}
			else if (obj.event === 'del') {
				layer.confirm('确定要删除该记录吗?', {
					icon: 3,
					title: '提示'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.del();
						}
					}
					tool.delete("/admin/lottery_staff/del", { id: data.id }, callback);
					layer.close(index);
				});
			}
			else if (obj.event === 'sign') {
				layer.confirm('确定手动签到该用户?', {
					icon: 3,
					title: '提示'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.sign();
						}
					}
					tool.post("/admin/lottery_staff/sign", { id: data.id }, callback);
					
					layer.close(index);
					//重载表格
					layui.pageTable.reload();
				});
			}
			else if (obj.event === 'unsign') {
				layer.confirm('取消该用户签到，取消后不可参与抽奖活动?', {
					icon: 3,
					title: '提示'
				}, function(index) {
					let callback = function (e) {
						layer.msg(e.msg);
						if (e.code == 0) {
							obj.sign();
						}
					}
					tool.post("/admin/lottery_staff/unsign", { id: data.id }, callback);
					
					layer.close(index);
					//重载表格
					layui.pageTable.reload();
				});
			}
			return false;
		});

		//监听搜索提交
		form.on('submit(searchform)', function(data) {
			layui.pageTable.reload({
				where: {
					keywords: data.field.keywords
				},
				page: {
					curr: 1
				}
			});
			return false;
		});
	}
</script>
{/block}
<!-- /脚本 -->